<template>
  <div id="hostroominfo">
       <mu-dialog :open="dialog" title="房态日期" scrollable>
            <div  id="roomstate" style="width: 100%;"></div>
            <input type="hidden" name="t" id="t" value=""  class="auto-kal" style="width:200px;" />
            <mu-flat-button primary label="确定" @click="subselecttime" slot="actions"/>
        </mu-dialog>
        <div class="head">
            <div class="back"  @click="back">
            <mu-icon value="chevron_left"  />
            </div>
            <div class="search" @click="">
                详情
            </div>
            <div class="flex1"></div>
        </div>
        <section class="fixed-bottom">
            <div class="swipercenter">
                <div class="price">
                  ￥{{roomdata.price}}
                </div>
                <div class="sleNum">
                    <span v-text="slenum"></span>/<span>{{swiperlists.length}}</span>
                </div>
                <div class="swiper-container2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in swiperlists">
                            <img class="showimg" :src='baseurl + item.imageUrl'>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="houseinfo">
                <li class="house-list">
                    <span class="house-left">房型</span>
                    <span class="house-right">{{roomdata.houseTypeDesc}}</span>
                </li>
                <li class="house-list">
                    <span class="house-left">面积</span>
                    <span class="house-right">{{roomdata.area}}m<sup>2</sup></span>
                </li>
                <li class="house-list">
                    <span class="house-left">床数</span>
                    <span class="house-right">{{roomdata.quantity}}</span>
                </li>
                <li class="house-list">
                    <span class="house-left">配套</span>
                    <span class="house-right">
                        <i class="material-icons">desktop_windows</i>
                        <i class="material-icons">tv</i>
                        <i class="material-icons">rss_feed</i>
                        <i class="material-icons">keyboard_arrow_right</i>
                    </span>
                </li>
                <li class="house-list">
                    <span class="house-left">房态</span>
                    <span class="house-right font-size12" @click="dialog=true">查看日历</span>
                </li>
            </ul>

            <div class="address">
                <i class="material-icons add-place">place</i>
                <span>{{roomdata.locationTag}}</span>
                <a :href="'tel:'+roomdata.stewardMobileNo">
                <i class="material-icons add-phone">local_phone</i>
                </a>
            </div>
            <div class="amap-page-container">
                <el-amap :vid="'amap-vue'" :center="amap.center" :zoom="amap.zoom" :map-manager="amap.amapManager" >
                    <el-amap-marker  :position="amap.marker"></el-amap-marker>
                </el-amap>
            </div>

            <div class="characteristic golbal-part-title">
                <ul class="chara-cont">
                    <li class="chara-cont-list">
                        <i class="material-icons chara-icon">tv</i>
                        <span>智能电视</span>
                    </li>
                </ul>
            </div>

            <div class=" golbal-part-title introduce">
                <div class="golbal-head-comm">
                    <span class="golbal-title-comm">小舍介绍</span>
                    <i class="material-icons golbal-arrow-rigth-comm">keyboard_arrow_right</i>
                </div>
                <p class="golbal-descrip">
                  {{roomdata.roomDesc}}
                </p>
            </div>
    </section>
    <ul class="fs_footer">
        <li @click="gotomanagement()">设备管理</li>
        <li @click="gotocheck()">房屋点检</li>
    </ul>
</div>

</template>

<script>
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    //import userinfo from '../../she/roominfochild/userinfo'
    export default {
        name: 'hostroominfo', //组件的名字
        data() {
            return { //数据
                slenum: 1,
                amap: {
                    zoom: 11,
                    center: [121.69991, 31.207649],
                    marker: [121.69991, 31.207649]
                },
                baseurl:$.hsf.baseUrl,
                dialog: false,
            }
        },
        methods: { //方法
            ...mapMutations(['setLeaveTime', 'setEnertTime','setActiveIndex']),
            ...mapActions(['getsearchRoom']),
             back() {
                this.$router.go(-1)
                this.setActiveIndex(0)
            },
            gotomanagement() {
                this.$router.push({
                    path: './management'
                })
            },
            gotocheck() {
                this.$router.push({
                    path: './check'
                })
            },
            magnify() {

                this.$router.push({
                    path: './magnify'
                })
            },
            subselecttime() {
                this.dialog = false
            },
            initKalendae() {
                let vm = this
                new Kalendae(document.getElementById("roomstate"), {
                    months: 4,
                    mf: ['2017-02-07', '2017-03-23', '2017-03-24', '2017-03-25'],
                    mode: 'range',
                    isroom: true,
                    subscribe: {
                        'change': function(date) {
                            //  console.log(date._i, this.getSelected());
                            let res = this.getSelected()
                            vm.setEnertTime(res.split('~')[0]);
                            vm.setLeaveTime(res.split('~')[1]);
                            // console.log(this.getSelected())
                            // vm.enterTime = res.split('~')[0];
                            // vm.leaveTime = res.split('~')[1];
                            t.value = res;
                            //  b.value=this.getSelectedAsDates()

                        }
                    }
                });
            },
            initswiper() {
                let vm = this
                $.session_Storage.removeItem('orderId')
                this.$store.state.roomId = this.$route.query.roomId
                new Swiper('.swiper-container2', { //使用 轮播
                    direction: 'horizontal',
                    autoplay: 2000,
                    loop: true,
                    initialSlide: vm.activeIndex || 0,
                    autoplayDisableOnInteraction: false,
                    preventClicks: false,
                    preventLinksPropagation: false,
                    width: window.innerWidth,
                    height: 100,
                    onTouchEnd: function(swiper) {
                        vm.slenum = swiper.activeIndex
                    },
                    onSlideChangeEnd: function(swiper) {
                        let sl = vm.swiperlists.length
                        if (swiper.activeIndex <= sl) {
                            vm.slenum = swiper.activeIndex
                        } else {
                            vm.slenum = 1
                        }
                        // console.log(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
                    },
                    onTap: function(swiper) {
                        vm.setActiveIndex(swiper.activeIndex - 1)
                        vm.$router.push({
                            path: '/magnify'
                        })
                    }
                })
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapGetters(['swiperlists']),
            ...mapState(['roomdata'])
        },
        mounted: function() { //组件加载完成
            let vm = this
            this.initKalendae()
            this.$nextTick(
                function() {
                    console.log(this.swiperlists)
                    setTimeout(function() {
                        //console.log(vm.swiperlists)
                        vm.initswiper()
                    }, 100);
                }
            )
          let roomid=this.$route.query.roomId
          this.getsearchRoom(roomid)
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        }
    }
</script>
<style scoped lang="scss">
    .head {
        .back {
            flex: 1;
            text-align: center;
            color: #fff;
            line-height: 64px;
        }
        .search {
            flex: 5;
            position: relative;
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
        .email {
            flex: 1;
            line-height: 64px;
            text-align: center;
            color: #fff;
        }
    }

    .swipercenter {
        position: relative;
        .showimg {
          width: 100%;
          display: block;
          height: 280px;
        }
        .price {
            position: absolute;
            left: 0px;
            top: 6px;
            z-index: 666;
            color: #fff;
            background: rgba(0, 0, 0, 0.3);
            width: 60px;
            height: 34px;
            border-radius: 2px;
            text-align: center;
            line-height: 34px;
        }
        .sleNum {
            position: absolute;
            right: 4px;
            bottom: 6px;
            z-index: 666;
            color: #fff;
        }
    }

    .userinfo {
        margin-bottom: 10px;
    }

    .houseinfo {
        border-top: 2px solid #eee;
        .house-list {
            margin: 5px 1.2mm;
            border-bottom: 1px solid #eee;
            display: flex;
            line-height: 2;
            .house-left {
                flex: 2;
                position: relative;
                text-align: left;
                color: #666;
            }
            .house-right {
                flex: 4;
                position: relative;
                text-align: right;
                color: #333;
            }
            .font-size12{
                font-size:1.2rem;
            }
        }
    }

    .address {
        border-top: 2px solid #eee;
        display: flex;
        justify-content: center;
        /*定义项目在主轴的对齐方向*/
        align-items: center;
        /*定义项目在交叉轴的对齐方向*/
        padding: 10px 15px;
        .material-icons {
            vertical-align: -10px;
            color: #999;
        }
        .add-place {
            flex: 1;
            position: relative;
            text-align: left;
        }
        span {
            flex: 6;
            position: relative;
            text-align: left;
            color: #333;
            font-size: 16px;
        }
        .add-phone {
            flex: 1;
            position: relative;
            text-align: right;
        }
    }

    .amap-page-container {
        height: 200px;
        width: 100%;
    }

    .characteristic {
        border-top: 2px solid #eee;
        .chara-cont {
            margin: 10px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            /*定义项目在主轴的对齐方向*/
            align-items: center;
            /*定义项目在交叉轴的对齐方向*/
            .chara-cont-list {
                flex: 0 0 25%;
                margin: 5px auto;
                position: relative;
                text-align: left;
                .chara-icon,
                span {
                    display: block;
                    color: #999;
                    text-align: center;
                }
            }
        }
    }

    .introduce,
    .evaluate {
        border-top: 2px solid #eee;
    }

    .eval-cont {
        margin: 10px auto;
        .eval-list {
            display: flex;
            flex-wrap: nowrap;
            .eval-img {
                flex: 1;
                position: relative;
                text-align: left;
                margin-right: 10px;
            }
            .eval-list-right {
                flex: 4;
                position: relative;
                text-align: left;
                color: #333;
                .eavl-list-right-head {
                    margin-top: 15px;
                    p {
                        font-size: 16px;
                        font-family: "微软雅黑";
                    }
                    .eavl-list-right-date {
                        color: #999;
                    }
                }
            }
        }
    }

    .eval-pic {
        width: 80px;
        height: 60px;
    }

    .footer{
        background-color: #5b9bd5;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
